<template>
  <div class="search-item">
    <div class="label">{{ item.name }}</div>
    <div class="content" v-if="item.type === 'string'">
      <el-input
        v-model="value"
        :clearable="true"
        :placeholder="item.name"
        @change="onChange"
      ></el-input>
    </div>
    <div class="content" v-if="item.type === 'select'">
<!--      :clearable="true"-->
      <el-select
        v-model="value"
        :placeholder="item.name"
        @change="onChange"
        @focus="onFocus"
        :loading="loading"
        :loading-text="'加载中...'"
        style="width: 200px"
      >
        <el-option :value="-1" label="全部"></el-option>
        <el-option v-for="(d, i) in item.displayValue" :value="i" :key="i" :label="d">{{ d }}</el-option>
      </el-select>
    </div>
    <div class="content" v-if="item.type === 'datetime'">
      <el-date-picker
        v-model="value"
        type="datetime"
        @change="onChange"
        style="width: 200px"
        format="yyyy-MM-dd HH:mm:ss"
        :placeholder="item.name"
      ></el-date-picker>
    </div>
    <div class="content" v-if="item.type === 'date'">
      <el-date-picker
        v-model="value"
        @change="onChange"
        format="yyyy-MM-dd"
        type="date"
        :placeholder="item.name"
        style="width:350px"
      ></el-date-picker>
    </div>
    <div class="content" v-if="item.type === 'daterange'">
      <el-date-picker
        v-model="value"
        @change="onChange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        type="daterange"
        :placeholder="item.name"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 350px"
      ></el-date-picker>
    </div>
    <div class="content" v-if="item.type === 'datetimerange'">
      <el-date-picker
        v-model="value"
        @change="onChange"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        :placeholder="item.name"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 400px"
      ></el-date-picker>
    </div>
    <div class="content" v-if="item.type === 'cascader'">
      <el-cascader
        ref="cascader"
        @change="onChange"
        @focus="onCascaderFocus"
        v-model="value"
        :show-all-levels="false"
        :props="{
          label: 'name',
          value: 'id',
          checkStrictly: true
        }"
        :options="options"
      ></el-cascader>
    </div>
    <div class="content" v-if="item.type === 'categoryCascader'">
      <el-cascader
        ref="cascader"
        @change="onCategoryChange"
        @focus="categoryCascaderFocus"
        v-model="value"
        :show-all-levels="false"
        :props="{
          label: 'name',
          value: 'id',
          checkStrictly: true
        }"
        :options="options"
      ></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SiSearchItem',
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    // clear: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      loading: false,
      value: '',
      options: []
    }
  },
  // watch: {
  //   clear(clear) {
  //     if (clear) {
  //       this.value = ''
  //     }
  //   }
  // },
  methods: {
      getTreeData(data) {
        console.log(data)
          for (var i = 0; i < data.length; i++) {
              if (data[i].children.length < 1) {
                  // children若为空数组，则将children设为undefined
                  data[i].children = undefined;
              } else {
                  // children若不为空数组，则继续 递归调用 本方法
                  this.getTreeData(data[i].children);
              }
          }
          return data;
      },
    onCascaderFocus() {
      const item = this.item
      if (item.callback) {
        const cb = item.callback
        cb().then(res => {
            console.log(5555559999,res)
          this.options = this.getTreeData(res.res)
        })
      }
    },
    categoryCascaderFocus() {
      const item = this.item
      if (item.callback) {
        const cb = item.callback
        cb().then(res => {
          this.options = this.getTreeData(res)
        })
      }
    },
    // 当为select下拉选项时，获得焦点再获取选项
    onFocus() {
      const item = this.item
      if (item.callback && !item.value) {
        this.loading = true
        const cb = item.callback
        console.log(555555,cb)
        cb().then(res => {
          // 返回的res作为select的选项
          item.displayValue = res.displayValue
          item.value = res.value
          this.loading = false
        })
      }
    },
    // 首先分类型监听表单的数据变动，并把最新的value值赋值给定义的obj对象中
    onChange(e) {
      console.log(e)
      let obj = {}
      obj.key = this.item.key
      let type = this.item.type
      if (type === 'string') {
        let value = e
        if (value) {
          obj.value = value
        }
      } else if (type === 'select') {
        let value = e
        if (value !== -1) {
          obj.value = this.item.value[value]
        } else {
          obj.value = undefined
        }
      } else if (type === 'date') {
        obj.value = e
      } else if (type === 'datetime') {
        obj.value = e
      } else if (type === 'daterange') {
        if (!e[1] && !e[0]) {
          obj.value = undefined
        } else {
          obj.value = e
        }
      } else if (type === 'datetimerange') {
        if (e) {
          if (!e[1] && !e[0]) {
            // when arr member is '', set this item disappear
            obj.value = undefined
          } else {
            obj.value = e
          }
        } else {
          obj.value = undefined
        }
      } else if (type === 'cascader') {
        let eArr = [...e]
        if (eArr && eArr.length > 0) {
          obj.value = eArr[eArr.length - 1]
          console.log(obj.value)
          this.$refs.cascader.dropDownVisible = false
        } else {
          obj.value = undefined
        }
      }
      // 最后通过$emit的形式通知父组件接受obj对象
      this.$emit('on-change', obj) // emit
    },
    //级联选择器的数据改变时触发
    onCategoryChange(e) {
      let obj = {}
      obj.key = this.item.key
      obj.value = {id: e[e.length-1]}
      this.$emit('on-change', obj) // emit
    }
  }
}
</script>

<style lang="less" scoped>
.search-item {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 10px;
  .label,
  .content {
    display: inline-block;
  }
  .label {
    font-size: 14px;
    text-align: center;
    margin-right: 15px;
  }
}
</style>
